<template>
    <div>
        <div>
            <select class="a" v-model="id1" @change="resshow2($event)">
                <option value="">省份</option>
                <option v-for="(i,j) in reglist1" :key="j" v-bind:value="i.id">{{i.name}}</option>
            </select>
        </div>
        <div>
            <select class="b" v-model="id2" @change="resshow3($event)">
                <option value="">市级</option>
                <option v-for="(i,j) in regslist2" :key="j" v-bind:value="i.id">{{i.name}}</option>
            </select>
        </div>
        <div>
            <select class="c" v-model="id3" @change="resshow4($event)">
                <option value="">县级</option>
                <option v-for="(i,j) in regsslist3" :key="j" v-bind:value="i.id">{{i.name}}</option>
            </select>
        </div>
        <div>
            <select class="d" v-model="id4" @change="resshow5($event)">
                <option value="">乡级</option>
                <option v-for="(i,j) in regsslist4" :key="j" v-bind:value="i.id">{{i.name}}</option>
            </select>
        </div>
        <div>
            <select class="e" v-model="id5">
                <option value="">村级</option>
                <option v-for="(i,j) in regsslist5" :key="j" v-bind:value="i.id">{{i.name}}</option>
            </select>
        </div>
    </div>
</template>

<script>
import {RI_regs_show,RI_resx_show} from '../axios_send/api.js'
export default {
    name:"region",
    data(){

        return{
            id1:"",
            id2:"",
            id3:"",
            id4:"",
            id5:"",
            reglist1:"",
            regslist2:"",
            regsslist3:"",
            regsslist4:"",
            regsslist5:"",
        }
    },
    methods:{
        regshow(){
        RI_regs_show()
        .then(res=>{
            console.log(res)
            if(res.code==200){
            this.reglist1 = res.data
            }
            })
        },
        resshow2(event){
            console.log(event.target.value);
            
            var data = {"r_id":event.target.value}
            console.log(data);
            
            RI_resx_show(data)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    this.regslist2 = res.data
                }
            })
        },
        resshow3(event){
            console.log(event.target.value);
                
            var data = {"r_id":event.target.value}
            console.log(data);
                
            RI_resx_show(data)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    this.regsslist3 = res.data
                }
            })
        },
        resshow4(event){
            console.log(event.target.value);
                
            var data = {"r_id":event.target.value}
            console.log(data);
                
            RI_resx_show(data)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    this.regsslist4 = res.data
                }
            })
        },
        resshow5(event){
            console.log(event.target.value);
                
            var data = {"r_id":event.target.value}
            console.log(data);
                
            RI_resx_show(data)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    this.regsslist5 = res.data
                }
            })
        },
    },
    created(){
        this.regshow()
        // this.resshow2()
    }
}
</script>

<style>
 
</style>
